<template>
	<div class="editContain">
		<a-button @click="add(0)">插入标题</a-button>
		<a-button @click="add(1)">插入文本</a-button>
		<a-button @click="uploadVisible=true">插入图片</a-button> 
		<a-button @click="addButton">插入按钮</a-button>
		<a-button @click="checkRef()">查看ref</a-button>

		<a-divider />

		<a-form :form="form" ref="richtext">
			<a-form-item v-for="(item,k) in fieldNum" style='width: 95%;margin-bottom: 10px;'>  
				<div  style="text-align:center" v-if="imgNum.indexOf(item)!=-1" >
					<img :src="imgsrcArr[item]"  style="max-width: 100%;">
				</div>
				
				<a-input v-if="titleNum.indexOf(item)!=-1" v-decorator="[
		          `input[${item}]`]"/>

		       <a-textarea v-if="textNum.indexOf(item)!=-1" v-decorator="[
		          `textarea[${item}]`]" :autosize="{ minRows: 3 }" />

		       <a-button v-if="btnNum.indexOf(item)!=-1">点我</a-button>
		       <a-tooltip title='删除'>
			       <a-icon type="close-circle" class="cursor" @click='delItem(item,k)' style='position: absolute;right: -24px;bottom:0'/>
			   </a-tooltip>
			</a-form-item>
		</a-form>
		<!-- 是坚持的热情点燃？
			 还是冒险的乐趣驱动 -->
 		<btnSetting  ref='btnSettingModal' :visible='btnVisible' v-on:cancel='btnVisible=false'> </btnSetting>
		
	</div>
</template>

<script type="text/javascript">
	import  imageUpload from  '@/components/common/imageUpload'
	import  btnSetting  from  '@/components/minipro/HomeSetting/btnSetting'
	export default{
		name:"selfEditor",
		data(){
			return {
				uploadAddress:process.env.BASE_API+"/op/fileupload/upload_file",/*upload_requesturl*/

				fieldNum:[],
				rightNum:-1,

				imgNum:[],
				titleNum:[],
				textNum:[],
				btnNum:[],

				imgsrcArr:{
				    // "static/img/icon_fahuo12.png","static/img/icon_fahuo12.png"
				},
				fileData:[],
				uploadVisible:false,
				btnVisible:true,

				formset:{

				}

			}
		},
		created(){

		},
		beforeCreate () {
		    this.form = this.$form.createForm(this);
		},
		methods:{
			/*
			 * 插入标题
			*/
			add(num){
				this.rightNum++
				this.fieldNum.push(this.rightNum)
				switch(num){
					case 0:
						this.titleNum.push(this.rightNum) 
						break;
					case 1:
						this.textNum.push(this.rightNum) 
						break;
					case 2:
						// this.uploadVisible = true
						break;
					case 3:
						this.btnNum.push(this.rightNum) 
						break;
					default:

				}
				
			},
			 
		    /*表单图片操作 对应数据绑定*/
		    removeFile(e){ 
		      this.removeFile_fromList(e,this.fileData)  
		      //重置绑定表单项的值
		      this.form.setFieldsValue({['imageFileCode']:''}) 
		    },
		    uploadSuccess(file,fileList){ 

		    },
		    handleOk(){
		    	console.log(this.fileData) 

		    	this.rightNum++
				this.fieldNum.push(this.rightNum)
		    	this.imgNum.push(this.rightNum) 

	        	let  code  = this.fileData[0].response.data.code , num = this.rightNum 
	        	Object.assign(this.imgsrcArr,{[num] : process.env.BASE_API + "/op/fileupload/download_file?fileCode=" + code })
	        	 
	        	this.uploadVisible = false/*5.25*/

	        	this.fileData.splice(0,1)

		    },
		    addButton(){
		    	this.btnVisible=true
		    	this.$refs.btnSettingModal.$emit('openDialog')

		    },

		    checkRef(){
		    	console.log(this.form.getFieldsValue())
		    },
		    delItem(item,k){
		    	console.log(k)
		    	this.fieldNum.splice(k,1)
		    	
		    	if(this.titleNum.includes(item)){
		    		let index = this.titleNum.indexOf(item)
		    		this.titleNum.splice(index,1)
		    	}
		    	if(this.textNum.includes(item)){
		    		let index = this.textNum.indexOf(item)
		    		this.textNum.splice(index,1)
		    	}

		    	if(this.imgNum.includes(item)){
		    		let index = this.imgNum.indexOf(item)
		    		this.imgNum.splice(index,1)
		    	}
		    	if(this.btnNum.includes(item)){
		    		let index = this.btnNum.indexOf(item)
		    		this.btnNum.splice(index,1)
		    	}
		    	 
		    }
			
		},
		computed:{
			 imgsource:function(k){
			 	console.log(k)
			 	// return this.imgsrcArr[k] 
			 }
		},
		components:{
			imageUpload,
			btnSetting
		}
	}
</script>

<style scoped="scoped">
	.editContain{
		min-height: 400px;
		border:1px solid #ddd;
		padding: 10px 20px;
	}
</style>